<template>
  <div class="box">
    <slot></slot>
    <!-- <WSelect :options="options" v-model="value" /> -->
    <div class="seize a seat"></div>
    <Panel class="panel1" :title="'天气'">
      <div class="weatherContent">
        <div
          class="weatherItem"
          v-for="(item, index) in weatherList"
          :key="index"
        >
          <img class="weatherItem-img" :src="item.day_weather_pic" />
          <div class="weatherInfo">
            <div>{{ item.day }}</div>
            <div>{{ item.day_weather }}</div>
            <div>
              {{ item.night_air_temperature }}/{{ item.day_air_temperature }}℃
            </div>
          </div>
        </div>
        <!--                <div class="weatherItem">-->
        <!--                    <img src="../../../../../public/images/ui/多云.png" />-->
        <!--                    <div class="{styles.weatherInfo}">多云<br />16/22℃</div>-->
        <!--                </div>-->
        <!--                <div class="weatherItem">-->
        <!--                    <img src="../../../../../public/images/ui/多云.png" />-->
        <!--                    <div class="{styles.weatherInfo}">多云<br />16/22℃</div>-->
        <!--                </div>-->
      </div>
    </Panel>
    <Panel :title="'未来两小时降雨'">
      <div class="bar">
        <EchartsBar :recive-data="barData" />
      </div>
      <div class="pie">
        <EchartsPie :recive-data="pieData" v-if="pieData.length" />
      </div>
    </Panel>
    <JingQingList :data="jingQingData" />
  </div>
</template>

<script>
// import WSelect from "../../../../component/WSelect";
// import { FetchTailingPondiList } from "../../../../api";
import Panel from "../../../../component/Panel/index";
import EchartsBar from "./component/EchartsBar";
import EchartsPie from "./component/EchartsPie";
import JingQingList from "./component/JingQingList";
import { FetchCalculusInfoById, FetchWeatherById } from "@/api";
import isNil from "ramda/src/isNil";

function getMockJingQingData(type) {
  let v1 = [515.5, 512.2, 0.75 / 100];
  if (type === "qiucheng") {
    v1 = [425, 422, 1.2 / 100];
  }
  return [v1[0], v1[1], v1[0] - v1[1], (v1[0] - v1[1]) / v1[2]];
}

export default {
  name: "TheRight",
  components: {
    // WSelect,
    Panel,
    EchartsBar,
    EchartsPie,
    JingQingList,
  },
  props: {
    reciveId: {
      // type: ,
    },
    platformCode: String,
  },
  data() {
    return {
      barData: [
        { name: "08:00:00", car: 3 },
        { name: "09:00:00", car: 5 },
        { name: "10:00:00", car: 6 },
        { name: "11:00:00", car: 4 },
        { name: "12:00:00", car: 3 },
        { name: "13:00:00", car: 3 },
      ],
      pieData: [],
      jingQingData: [
        // { type: "坝顶标高", desc: "m", level: "515.5" },
        // { type: "库水位标高", desc: "m", level: "512.2" },
        // { type: "超高", desc: "m", level: 515.2 - 512.2 + "" },
        // { type: "调洪库容", desc: "万m³", level: 19.35 },
        // { type: "干滩长度", desc: "m", level: (515.2 - 512.2) / 1.2 / 100 + "" },
      ],
      weatherList: [],
      // id: 1, //Select返回IDE尾矿库Id
    };
  },
  watch: {
    reciveId: {
      immediate: true,
      async handler(id) {
        if (isNil(id)) {
          return;
        }
        if (this.platformCode === "makeng") {
          const { floodRoutingResult } = await FetchCalculusInfoById({ id });
          this.jingQingData = [
            {
              type: "滩顶高程",
              desc: "m",
              level: floodRoutingResult.elevation,
            },
            {
              type: "正常运行水位",
              desc: "m",
              level: floodRoutingResult.normalWaterLevel,
            },
            // { type: "洪水位", desc: "m", level: floodRoutingResult.waterMark },
            {
              type: "超高",
              desc: "m",
              level:
                floodRoutingResult.elevation -
                floodRoutingResult.normalWaterLevel,
            },
            // { type: "调洪高度", desc: "m", level: floodRoutingResult.floodHeight },
            {
              type: "调洪库容",
              desc: "万m³",
              level: floodRoutingResult.capacity,
            },
            {
              type: "干滩长度",
              desc: "m",
              level:
                (floodRoutingResult.elevation -
                  floodRoutingResult.normalWaterLevel) /
                (0.75 / 100),
            },
            // {
            //     type: "最大下泄流量",
            //     desc: "m³/s",
            //     level: floodRoutingResult.releaseFloodFlow,
            // },
          ];
        }

        const data = await FetchWeatherById({ id });
        this.weatherList = [
          {
            ...data.f1,
            day: "今天",
          },
          {
            ...data.f2,
            day: "明天",
          },
          {
            ...data.f3,
            day: "后天",
          },
        ];
        this.pieData = [data.f1.jiangshui.split("%")[0]];
        // this.pieData = [10];
      },
    },
  },
  created() {
    this.jingQingData = [
      { type: "滩顶高程", desc: "m" },
      { type: "正常运行水位", desc: "m" },
      { type: "超高", desc: "m" },
      { type: "调洪库容", desc: "万m³" },
      { type: "干滩长度", desc: "m" },
    ];
  },
  methods: {
    getDay(str) {
      return (str && str.substring(4)) || "";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  // position: relative;

  // > div:nth-child(2) {
  // margin-top: -64px;
  // }
  // width: 360px;
  // border: 1px solid red;
  > div:nth-child(3) {
    // border: 1px solid red;
    overflow: hidden;
    margin-bottom: 10px;
    width: 100%;
    height: 191px;
    margin-top: 32px;

    // img {
    //   max-width: 100%;
    // }
    .weatherContent {
      // border: 1px solid red;
      width: 355px;
      height: 143px;
      display: flex;
      justify-content: space-around;
      padding-top: 15px;
    }
  }

  > div:nth-child(4) {
    // margin-bottom: 20px;
    height: 262px;
    position: relative;

    img {
      max-width: 100%;
    }

    .bar {
      position: absolute;
      top: 74px;
      left: 0;
      width: 215px;
      height: 140px;
      // border: 1px solid red;
    }

    .pie {
      position: absolute;
      top: 90px;
      right: 0;
      width: 110px;
      height: 110px;
      // border: 1px solid red;
      // background: url("../../../../public/images/ui/编组\ 10.png") no-repeat center;
      background-size: 95%;
    }
  }

  > div:nth-child(5) {
    // height:@bottomHeight - 10px;
    // position: absolute;
    // top: -70px;
    // width: 358px;
    height: 221px;
  }
}
.weatherItem {
  height: 83px;
  width: 68px;
  text-align: center;

  .weatherItem-img {
    width: 48px;
    height: 48px;
    margin-bottom: 3px;
  }

  .weatherInfo {
    margin: 0 auto;
    width: 46px;
    height: 28px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
  }
}
</style>
